<template>
    <div style="height: 50px;">
        <el-button round @click="AddFeedProduct()">保存</el-button>
    </div>

    <div>
        <h1 style="text-align: center; font-size: 30px;">生产补料</h1>
    </div>
    <!-- 添加 -->
    <table border="1"
        style="border-collapse: collapse; width: 100%; height: 40px;margin-top: 30px;margin-bottom: 30px;">
        <tr>
            <td :colspan="8" style="height: 50px; font-size: 20px;">基本信息</td>
        </tr>
        <tr style="height: 70px;">
            <td style=" font-size: 17px;text-align: center">单据编号</td>
            <td style="text-align: center;"><input v-model="form.feDocumentNumber" type="text"
                    style="height: 50px; width: 90%;text-align: center;" placeholder="保存后自动生成" />
            </td>
            <td style=" font-size: 17px;text-align: center">来源单据类型</td>
            <td style="text-align: center;">
                <select v-model="form.feSourceType" style="height: 50px; width: 90%; text-align: center;">
                    <option value="">无来源</option>
                    <option value="1">生产派工</option>
                    <option value="2">委外返工</option>
                    <option value="3">生产返工</option>
                    <option value="4">整单委外</option>
                    <option value="5">工序委外</option>
                </select>
            </td>
            <td style=" font-size: 17px;text-align: center">补料日期</td>
            <td style="text-align: center;"><input v-model="form.feDate" type="date"
                    style="height: 50px; width: 90%;text-align: center;" />
            </td>
        </tr>
    </table>


    <div style="height: 50px;">
        <el-button round @click="addhang()">新增行</el-button>
    </div>

    <!-- 产品表格 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
                <th style="height: 40px;">序号</th>
                <th>产品名称</th>
                <th>产品编号</th>
                <th>规格</th>
                <th>补料数量</th>
                <th>出库库管</th>
                <th>交货日期</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check" :key="index">
                <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
                <td style=" text-align: center;">{{ index + 1 }}</td>
                <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        @dblclick="dialogVisible = true" placeholder="双击选择产品名称" />
                </td>
                <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" /></td>
                <td><input v-model="item.pUnit" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.fePNum" type="text" style="height: 40px;width: 100%;text-align: center;"
                        @change="sumRPNum" />
                </td>
                <td><input v-model="form.prPeople" type="text" style="height: 40px;width: 100%;text-align: center;"
                        @dblclick="dialogVisible1 = true" placeholder="双击选择出库库管" />
                </td>
                <td><input v-model="item.fePDeliveryDate" type="date"
                        style="height: 40px;width: 100%;text-align: center;" />
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 合计 -->
    <el-form :model="form" lclass="demo-form-inline" :inline="true" style="margin-top: 40px;">
        <el-form-item label="数量合计">
            <el-input v-model="form.feNumTotal" style="width: 200px;" :disabled="true" />
        </el-form-item>
    </el-form>

    <!-- 产品名称弹框 -->
    <el-dialog v-model="dialogVisible" title="产品名称选择" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                        default-expand-all="true" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="pName" label="产品名称" align="center" />
                        <el-table-column prop="pNumber" label="产品编号" align="center" />
                        <el-table-column prop="pUnit" label="规格型号" align="center" />
                    </el-table>
                    <!-- 分页 -->
                    <table>
                        <tr>
                            <td>
                                <el-pagination v-model:current-page="productPage.pindex"
                                    v-model:page-size="productPage.psize" prev-text="上一页" next-text="下一页"
                                    :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                                    :total="productPage.sumCount">
                                    ，当前是{{ productPage.pindex }}/{{ productPage.pageLast }}页，每页{{ productPage.psize
                                    }}条
                                </el-pagination>
                            </td>
                            <td>
                                <el-pagination v-model:current-page="productPage.pindex"
                                    v-model:page-size="productPage.psize" prev-text="上一页" next-text="下一页"
                                    :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                                    :total="productPage.sumCount">
                                    <el-button :disabled="productPage.pindex == 1"
                                        @click="productPage.pindex = 1">首页</el-button>
                                </el-pagination>
                            </td>
                            <td>
                                <el-pagination v-model:current-page="productPage.pindex"
                                    v-model:page-size="productPage.psize" prev-text="上一页" next-text="下一页"
                                    :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                                    :total="productPage.sumCount">
                                    <el-button :disabled="productPage.pindex == productPage.sumCount"
                                        @click="productPage.pindex = productPage.pageLast">尾页</el-button>
                                </el-pagination>
                            </td>
                        </tr>
                    </table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>

    <!-- 库管弹框 -->
    <el-dialog v-model="dialogVisible1" title="库管选择" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick2" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mName" label="姓名" align="center" />
                        <el-table-column prop="sectorName" label="部门" align="center" />
                        <el-table-column prop="postName" label="岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible1 = false">
                保存
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'

const ids = ref([])

const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

//添加
const form = reactive({
    "feedingId": "",
    "feNumber": "",
    "feDocumentNumber": "",
    "feSourceType": "",
    "feNumTotal": 0,
    "feOutState": "",
    "feDate": "",
    "office_Id": "",
    "user_Id": "",
    "feedingProducts": [
        {
            "feedProductId": "",
            "productId": "",
            "feeding": "",
            "fePNum": "",
            "manpowerId": "",
            "fePDeliveryDate": "",
            "office_Id": "",
            "user_Id": ""
        }
    ]
})

//随机数
const generateRandomNumber = () => {
    const a = Math.floor(100000 + Math.random() * 900000); // 生成一个 6 位的随机数
    sessionStorage.setItem('Vendor', JSON.stringify(a));
}


//点击新增行
const check = ref([])
const addhang = () => {
    check.value.push({
        pName: '',
        pNumber: '',
        pUnit: '',
        rPNum: '',
        rpPrice: ''
    });
}

//#region  产品名称弹框
//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const productPage = reactive({
    pindex: 1,
    psize: 10,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProductList', {
        params: {
            pindex: productPage.pindex,
            psize: productPage.psize,
            PName: productPage.PName || "",
            PNumber: productPage.PNumber || "",
            ProductTypeId: 0
        }
    })
        .then(res => {
            productlist.value = res.data.data.list
            productPage.sumCount = res.data.data.sumCount;
            productPage.pageLast = res.data.data.pageLast
            console.log(res.data)
        })
}

//选中的产品名称
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(val)
    console.log(check.value[0].pName)
}

//分页
watch(productPage, () => {
    ProductList();
})


//#endregion


//#region  库管

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 3,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: User[]) => {
    check2.value = val
    form.prPeople = check2.value[0].mName
    form.manpowerId = check2.value[0].manpowerId
    console.log(form.manpowerId)
}


//#endregion

//#endregion

//输入数量change事件
const sumRPNum = (sum: number) => {
    console.log(sum)
    form.feNumTotal += Number(sum.srcElement.__vnode.dirs[0].value);
    console.log(form.feNumTotal)
}

//点击复选框获取选中的值
const selectedRows = ref([])
const huoqu = () => {
    if (ids.value) {
        selectedRows.value = check.value.filter(item => item.productId);
    }
    console.log(selectedRows.value)
}


//添加
const AddFeedProduct = () => {
    var model = {
        feedingId: 0,
        feNumber: form.feNumber,
        feDocumentNumber: sessionStorage.getItem('Vendor'),
        feSourceType: form.feSourceType,
        feNumTotal: form.feNumTotal,
        feOutState: 1,
        office_Id: '0',
        user_Id: 0,
        feedingProducts: selectedRows.value.map(item => ({
            productId: item.productId,
            feNumber: form.feNumber,
            fePNum: item.fePNum,
            manpowerId: form.manpowerId,
            fePDeliveryDate: item.fePDeliveryDate,
            office_Id: '0',
            user_Id: 0,
        }))
    }
    console.log(model);
    axios.post(http.zblnb + '/sc/api/Feeding/AddFeedProduct', model)
        .then(res => {
            if (res.data.data > 0) {
                ElMessage.success('添加成功');
                router.push('/ListFeeding');
            }
            else {
                ElMessage.error('添加失败');
            }
        })
}



onMounted(() => {
    generateRandomNumber();
    GetSectorList();
    ProductList();
    getVendorType();
    GetManpowerList();
})




</script>

<style></style>